<template>
  <div class="about-me-view">
    <h1>个人信息</h1>
    <div class="profile-card">
      <div class="profile-field">
        <label>姓名:</label>
        <span>{{ studentData.name }}</span>
      </div>
      <div class="profile-field">
        <label>性别:</label>
        <span>{{ studentData.sex }}</span>
      </div>
      <div class="profile-field">
        <label>年龄:</label>
        <span>{{ studentData.age }}</span>
      </div>
      <div class="profile-field">
        <label>分数:</label>
        <span>{{ studentData.score }}</span>
      </div>
    </div>
    
    <div class="actions">
      <button class="update-button" @click="goToUpdate">修改资料</button>
      <button class="logout-button" @click="handleLogout">注销账户</button>
      <button class="delete-button" @click="goToDelete">删除账户</button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { studentApi, type Student } from '@/services/api'

const router = useRouter()
const studentData = ref<Student>({
  name: '张三',
  sex: '男',
  age: 20,
  score: 85.5
})

onMounted(() => {
  // 在实际应用中，这里应该从服务器获取用户数据
  // fetchUserData()
})

const goToUpdate = () => {
  router.push('/update')
}

const goToDelete = () => {
  router.push('/delete')
}

const handleLogout = async () => {
  try {
    await studentApi.logout()
    router.push('/login')
  } catch (error) {
    console.error('注销失败:', error)
    alert('注销失败，请重试')
  }
}
</script>

<style scoped>
.about-me-view {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  width: 100%;
  max-width: 375px;
}

h1 {
  margin-bottom: 20px;
  font-size: 24px;
}

.profile-card {
  width: 100%;
  max-width: 300px;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 20px;
  background-color: #f9f9f9;
  margin-bottom: 20px;
}

.profile-field {
  display: flex;
  justify-content: space-between;
  margin-bottom: 15px;
}

.profile-field:last-child {
  margin-bottom: 0;
}

.profile-field label {
  font-weight: bold;
}

.actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  max-width: 300px;
}

.update-button, .logout-button, .delete-button {
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  width: 100%;
}

.update-button {
  background-color: #007bff;
  color: white;
}

.update-button:hover {
  background-color: #0056b3;
}

.logout-button {
  background-color: #ffc107;
  color: #212529;
}

.logout-button:hover {
  background-color: #e0a800;
}

.delete-button {
  background-color: #dc3545;
  color: white;
}

.delete-button:hover {
  background-color: #c82333;
}

@media (max-width: 390px) {
  .about-me-view {
    padding: 15px;
  }

  h1 {
    font-size: 22px;
  }
}
</style>